<!DOCTYPE html>
<html>
    <head>
        <meta charset='utf-8' /> 
        <link href='css/bootstrap-responsive.min.css' rel='stylesheet' type='text/css' />
        <link href='css/bootstrap.min.css' rel='stylesheet' type='text/css' />
        <link href='css/style.css' rel='stylesheet' type='text/css' />
        <script type="text/javascript" src="js/jquery.min.js"></script>
        <script type="text/javascript" src="js/bootstrap.min.js"></script>
        <script type="text/javascript" src="js/bootstrap-modal.js"></script>
        <script type="text/javascript" src="js/d3/d3.js"></script>
        <script type="text/javascript" src="js/d3/d3.layout.js"></script>
        <script type="text/javascript" src="js/d3/d3.geom.js"></script>
        <title>RDF Viewer</title>
    </head>
    <body>
        <div class="container-fluid">
            <center>
                <div class="row-fluid">
                    <div class="span2"><h1 style="display: inline"><a href=".">RDF Viewer</a></h1></div>
                </div>
                <div class="row-fluid">
                    <div class="span6">
                        <form method="get" action="." class="form-inline">
                            <input type="submit" id="buttonLoad" class="btn" value="Load Default File to Graphic"/>
                        </form>
                    </div>
                </div>
            </center>
        </div>

        <div style="float: left;border-width: 1px; border-style: solid;width:100%;min-height:500px;height:100%" id='chart'></div>
        <script type="text/javascript" src='js/main.js'>
        </script>

        <div class="modal hide" id="embedDialog">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">×</button>
                <h3>Embed this code</h3>
            </div>
            <div class="modal-body">
                <pre id="embedableCode"></pre>
            </div>
            <div class="modal-footer">
                <a href="#" class="btn close" data-dismiss="modal">Close</a>
            </div>
        </div>
        <script type="text/javascript">
        //Embed dialog
            /*$("#dialogButton").on('click', function () {
                var newUrl = thisUrl.replace("index.jsp?url", "?url").replace(/\/\?/, "/embed.php?");
                $("#embedableCode").text("<div style='width:600px;height:460px'><iframe style='overflow-x: hidden;overflow-y: hidden;' frameborder='0'  width='100%' height='99%' src='" + newUrl + "'></iframe></div>")
                $("#embedDialog").show();
            });
            $(".close").on('click', function () {
                $("#embedDialog").hide();
            });*/
        </script>
        <div style="border: 1px solid black; background: white;display:none;position: absolute;" id="literals">
            <h3 style="padding:5px;" id="literalsubject"></h3>
            <div style="padding:5px;" id="literalmsg"></div>
            <table class="table table-hover" id="literaltable">
                <thead>
                    <tr>
                        <th>Property</th><th>Value</th>
                    </tr>
                </thead>
                <tbody id="literalbody">
                </tbody>
            </table>
        </div>
    </body>
</html>